body {
    height: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  }

  html {
    height: 100%;
    box-sizing: border-box;
  }

  #app {
    height: 100%;
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  * {
    outline: none;
  }
  :focus {
    outline: none;
  }

  .no-padding {
    padding: 0px !important;
  }

  .padding-content {
    padding: 4px 0;
  }

  a:focus,
  a:active {
    outline: none;
  }
  a,
  a:focus,
  a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    outline: 0;
  }

  div:focus {
    outline: none;
  }

  .fr {
    float: right;
  }

  .fl {
    float: left;
  }

  .block {
    display: block;
  }

  .pointer {
    cursor: pointer;
  }

  .inlineBlock {
    display: block;
  }

  .clearfix {
    &:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
  }

  aside {
    background: #eef1f6;
    padding: 8px 24px;
    margin-bottom: 20px;
    border-radius: 2px;
    display: block;
    line-height: 32px;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    color: #2c3e50;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    a {
      color: #337ab7;
      cursor: pointer;

      &:hover {
        color: rgb(32, 160, 255);
      }
    }
  }

  //main-container全局样式
  .app-container {
    width: 100%;
    height: 100%;
    .container-list {
      padding: 20px 25px 0 25px;
      height: calc(100% - 72px);
      overflow: auto;
    }
  }
  .top-container {
    height: 60px;
    line-height: 55px;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E9EDF0;
    background-color: #fff;
    z-index: 90;
    h3 {
      color: #7A92A5;
      line-height: 50px;
    }
    .el-page-header {
      color: #7A92A5;
      line-height: 60px;
    }
    .el-page-header__content {
      color: #7A92A5;
      font-size: 16px;
    }
  }
  .components-container {
    margin: 30px 50px;
    position: relative;
  }

  .text-center {
    text-align: center
  }

  .sub-navbar {
    height: 50px;
    line-height: 50px;
    position: relative;
    width: 100%;
    text-align: right;
    padding-right: 20px;
    transition: 600ms ease position;
    background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

    .subtitle {
      font-size: 20px;
      color: #fff;
    }

    &.draft {
      background: #d0d0d0;
    }

    &.deleted {
      background: #d0d0d0;
    }
  }

  .link-type,
  .link-type:focus {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
  .filter-container {
    padding: 0 0 8px 10px;
    display: flex;
    justify-content: space-between;

    .filter-item {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
    }

    .select-option {
      display: flex;
      justify-content: space-between;
      line-height: 36px;
      .check-option {
        margin-left: 20px;
        width: 600px;
        display: flex;
        button {
          font-size: 14px;
        }
        .el-button {
          margin-right: 0.5rem;
        }
        .select-message {
          height: 35px;
          font-size: 13px;
          line-height: 35px;
          margin-right: 40px;
          display: inline-block;
          .select-num {
            color: #fdb10c;
            width: 300px;
          }
        }
      }
    }
    .filter-content {
      display: flex;
      justify-content: flex-start;
    }
  }

  //refine vue-multiselect plugin
  .multiselect {
    line-height: 16px;
  }

  .multiselect--active {
    z-index: 1000 !important;
  }

  .operation {
    cursor: pointer;
    font-size: 13px;
    color: #7A92A5;
    &:hover {
      color: $menuActiveText;
    }
  }

  .container-table {
    .show-eyes {
      cursor: pointer;
    }
  }

  .createPost-container {
    position: relative;
    height: calc(100% - 72px);
    overflow-x: hidden;
    .form-container {
      display: flex;
      .el-form-item {
        margin-bottom: 20px;
        label {
          color: #7a92a5;
          font-size: 12px;
        }
      }
      .createPost-main-container {
        padding: 25px 45px 20px 40px;
        border-right: 2px solid #f0f4f7;
        width: 75%;
        .lab {
          font-size: 13px;
        }
        .appendInfo {
          margin-bottom: 20px;
          li {
            display: flex;
            justify-content: space-between;
            height: 55px;
            line-height: 55px;
            padding: 0 20px;
            border: 1px solid #eaf7ff;
            font-size: 14px;
            &:hover {
              background: #eaf7ff;
            }
          }
        }
        .support {
          display: flex;
          flex-flow: wrap;
          justify-content: space-between;
          .el-form-item {
            width: 45%;
          }
        }
        .postInfo-container {
          position: relative;
          @include clearfix;
          margin-bottom: 10px;
        }
      }
    }
    .createPost-right-container {
      flex: 1;
      padding: 25px 10px 0px 30px !important;
      .right-container-item {
        padding: 25px 25px 0 30px;
        border-bottom: 1px solid $borderColor;
        &.no-border {
          border-bottom: none;
        }
      }
      .lab {
        font-size: 13px;
      }
      .publish {
        font-weight: 700;
      }
      .switch {
        margin-top: 5px;
      }
      .dateOption {
        width: 380px;
      }
      .upload-file{
        .el-upload {
          width: 100%;
        }
      }
    }
  }
  .el-drawer__header {
    margin: 0;
    padding: 20px 25px;
    border-bottom: 1px solid $borderColor;
    border-top: 6px solid #1890FF;
    color: #161E44;
  }
  .el-drawer__body {
    overflow-y: auto;
  }

  .no-label {
    .el-checkbox__label {
      display: none;
    }
  }

  .el-popconfirm {
    p {
      padding: 15px 0;
    }
  }

  .lang-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .more-action {
    color: #3899EC;
    i {
      font-size: 18px;
    }
    &:hover {
      color: #0775D4;
    }
  }
  .vxe-modal--wrapper {
    .vxe-modal--box {
      border: 0px !important;
      border-radius: 6px !important;
    }
  }
  .distpicker-address-wrapper{
    color: #999;
    select {
      width: 32%;
      margin-right: 1.25%;
      font-size: 14px !important;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .permissions {
    .el-checkbox__input {
      margin-top: 5px;
      vertical-align: top !important;
    }
  }

  .el-message {
    z-index: 9999 !important;
  }

  .filter-type {
    box-shadow: none !important;
    .el-tabs__content {
      display: none !important;
      padding: 0 !important;
    }
  }

  .el-table::-webkit-scrollbar{
    width: 10px;
    height: 10px;
  }
  .el-table::-webkit-scrollbar-track{
    background: rgb(239, 239, 239);
    border-radius:2px;
  }
  .el-table::-webkit-scrollbar-thumb{
    background: #bfbfbf;
    border-radius:10px;
  }
  .el-table::-webkit-scrollbar-thumb:hover{
    background: #333;
  }
  .el-table::-webkit-scrollbar-corner{
    background: #179a16;
  }

  .line-border {
    height: 1px;
    background-color: $borderColor;
  }
  .el-scrollbar__view {
    height: 100%;
  }
  @-webkit-keyframes inner-end-animated {
    0%{left:228px}
    to{left:0}
  }
  @keyframes inner-end-animated {
    0%{left:228px}
    to{left:0}
  }
  @keyframes home-end-animated {
    0%{left:-228px}
    to{left:0}
  }
  @keyframes home-start-animated {
    0%{left:0}
    to{left:-228px}
  }
  @-webkit-keyframes inner-start-animated {
    0%{left:0}
    to{left:228px}
  }
  @keyframes inner-start-animated {
    0%{left:0}
    to{left:228px}
  }
  .home-end {
    transform: translateX(-288px);
  }
  .home-start {
    transform: translateX(0);
  }
  .inner-end {
    -webkit-animation-name: inner-end-animated;
    animation-name: inner-end-animated;
  }
  .inner-start {
    -webkit-animation-name: inner-start-animated;
    animation-name: inner-start-animated;
  }

  /* el-switch loading 效果 */
  .el-switch.loading {
    pointer-events: none;
    .el-switch__core {
      opacity: 0.5;
      transition: all .3s;
      cursor: not-allowed;
      &:before {
        font-family: element-icons!important;
        animation: rotating 2s linear infinite;
        content: '\e6cf';
        position: absolute;
        font-size: 14px;
        z-index: 10;
        color: #409eff;
        transition: all .3s;
        top: 0;
        left: 2px;
      }
    }
    &.is-checked {
      .el-switch__core {
        &:before {
          left: 100%;
          margin-left: -16px;
        }
      }
    }
  }

  /* 列表中多分类样式 */
  .many-cate-list {
    span {
      display: inline-block;
      vertical-align: middle;
      margin: 4px;
      background: #f7f9fb;
      border: 1px solid #e9edf0;
      padding: 5px 20px;
      border-radius: 60px;
      font-size: 14px;
      color: #7a92a5;
    }
  }

  /* 多分类选中列表样式 */
  .showcategory {
    margin-top:10px;
    margin-bottom: 10px;
    li {
      line-height: 36px;
      background: #EDF6FE;
      color: #4FA3F1;
      margin-bottom: 5px;
      padding: 0 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 5px;
      span {
      }
      i {
        cursor: pointer;
      }
    }
  }
  .cateselect {
    position: relative;
    .el-select__tags {
      display: none;
    }
    .el-input {
      input {
        background: none;
      }
    }
    .catetag {
      position: absolute;
      top: 0;
      left: 8px;
      color: #999;
      z-index: -1;
    }
  }
